<!--
 * @Date: 2022-04-15 11:08:48
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-04-15 19:15:09
 * @FilePath: \weibovue\src\components\At\index.vue
 * @Description: at功能
-->
<template>
  <i class="iconfont icon-aite" id="showAt" @click="showAT"></i>
</template>
<script lang="ts" setup>
import Tribute from "tributejs";
import { computed, nextTick, onMounted, ref, watch } from "vue";
import { useStore } from "vuex";
import { followListType } from "../createWeiBo/types";
const store = useStore();
const tribute = new Tribute({
  trigger: "@",
  containerClass: "Atcontainer",
  values: function (text, cb) {
    remoteSearch(text, (users: any) => cb(users));
  },
  selectTemplate: function (item: any) {
    return `@${item.original.userInfo.nickName} - ${item.original.userInfo.id}`;
  },
  menuItemTemplate: function (item: any) {
    return `
    <div class="menuItem">
    <span>${item.original.userInfo.nickName}</span>
    </div>`;
  },
  noMatchTemplate: function () {
    return `<div class="empty">
      <i>"关注列表空空如也~"</i>
    </div>`;
  },
});
//点击图标触发
const showAT = (e: Event) => {
  nextTick(() => {
    let tel = document.querySelector(".el-textarea__inner")!;
    tribute.showMenuForCollection(tel);
  });
};
//获取关注数据
const remoteSearch = (text: string, cb: any) => {
  let data = (store.state.followingData as followListType).userList!.map(
    (item) => {
      return {
        id: item.id,
        userInfo: { id: item.user?.id, nickName: item.user?.nickName },
      };
    },
  );
  cb(data);
};
onMounted(() => {
  nextTick(() => {
    tribute.attach(document.querySelector(".el-textarea__inner")!);
  });
});
</script>
<style lang="less">
.Atcontainer {
  background-color: #fff;
  margin-top: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  width: 200px;
  max-height: 240px;
  overflow: auto;
  ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    li {
      flex: 1;
      width: 100%;
      list-style: none;
      .menuItem {
        width: 100%;
        padding: 10px;
      }
    }
    .empty {
      width: 240px;
      height: 240px;
      display: flex;
      justify-content: center;
      align-items: center;
      i {
        color: #ccc;
      }
    }
  }
}
.highlight {
  background-color: #fff2e5;
  color: #ff8200;
  cursor: pointer;
}
*::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
*::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgb(226, 226, 226);
}
</style>
